<template>
    <div class="flodContainer" >
        
        <div class="contentBox" :class="{openStyle: isOpen}">
            <div class="flexBox">
            <div class="left">
                <slot name="topleft"></slot>
                <!-- <el-button type="primary" @click="changeOpenStatus" v-if="isOpen">收起<i style="margin-left: 4px;font-size: 16px" class="el-icon-caret-top"></i></el-button>
                <el-button type="primary" @click="changeOpenStatus" v-if="!isOpen">展开<i style="margin-left: 4px;font-size: 16px" class="el-icon-caret-bottom"></i></el-button> -->
            </div>
            <div class="right">
                <slot name="topright"></slot>
            </div>
        </div>
            <slot name="content"></slot>
        </div>
        <!-- <div class="footer" @click="changeOpenStatus" :class="{'m-20':isOpen}"> -->
            <!-- <span v-if="!isOpen">展开<i class="el-icon-arrow-down"></i></span>
            <span v-if="isOpen">收起<i class="el-icon-arrow-up"></i></span> -->
        <!-- </div> -->
    </div>
</template>

<script>
export default {
    name: 'FlodContainer',
    props: {
        isOpen: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
        }
    },
    methods: {
        // changeOpenStatus() {
        //     this.isOpen = !this.isOpen;
        //     this.$emit('on-chagne', {type: 'open'})
        // }
    }
}
</script>

<style lang="scss" scoped>
.flodContainer{
    .flexBox{
        padding: 2px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    .contentBox{
        height: 0px;
        overflow: hidden;
        &.openStyle{
            height: auto;
        }
    }
    .footer{
        font-size: 26px;
        display: flex;
        align-items:center;
        justify-content: center;
        padding:10px 20px;
        box-sizing: border-box;
        color: #888;
        span{
            i{
                margin-left: 4px;
            }
        }
        &.m-20{
            margin-top: -20px;
        }
    }
}
</style>